<script setup lang="ts">
import {useRouter, useRoute} from 'vue-router'
import {Search} from '@element-plus/icons-vue'
import type {TabsPaneContext} from 'element-plus'
import {Server} from '@/stores/ajax'
import {GetUserState} from '@/stores/userState';

import {nextTick, onActivated, watch, ref} from 'vue'
import {ServerUtils} from '@/serverUtils';
import {random} from 'lodash';
import type {ComponentObjectPropsOptions} from "vue";
import {lowerPostImage,timeFormat} from '@/utils';
let posts = ref<any>()
type PostCallback = (page: number, posts_per_page: number) => Promise<any>
const props = defineProps({
    postCallback: Function
})

const postCallback: PostCallback = props.postCallback as any
let posts_per_page = 10

let loadfail = ref(false)
let currentPage = 1
let loading = false
const handleCurrentChange = async (val: number) => {
    await postCallback(val, posts_per_page).then(ps => {
        if (ps?.list.length) {
            for (let post of ps.list) {
                lowerPostImage(post)
                console.log(post)
            }
        }
        posts.value = ps
    })
}
const refresh = async () => {
    await handleCurrentChange(1)
}
refresh()
defineExpose({refresh, currentPage, posts})
</script>

<template>
    <div v-if='$DEV' class="dev-tag" >postList1</div>
    <div v-if='posts?.list' class="post-list-block">
        <div class="post-item" v-for="item in posts.list">
            <div class="subarea-label">
                <!-- {{ item.subarea.name}} -->
            </div>
            <div class="click hp">
                <div class="post-title">
                    <!-- {{ item.topic.name}} -->
                </div>
            </div>

            <div class="post-abstract hp"
                @click="$router.push({path: `/bbs/postTransfer/${item.pid}`})"
                v-html="item.content" />

            <!-- <div class="post-pic-area fhs" > -->
            <!--     <img src="img/pic-example1.png" class="post-pic" /> -->
            <!--     <img src="img/pic-example2.png" class="post-pic" /> -->
            <!-- </div> -->
            <div class="img-list">
                <Viewer :images="item.images" />
            </div>
            <div class="lastline fhs">
                <div class="author-avatar fv">
                    <el-avatar :size="14"
                        :src="Server.fileBaseURL + item.user.avatar" />
                </div>
                <div class="author-name">{{
                        item.user.user_name
                }}</div>
                <img src="icon-time.png"
                    class="icon-time">
                <div class="publish-time">
                    {{ timeFormat(item.create_time,
                            )
                    }}
                </div>
                <img src="icon-view.png"
                    class="icon-view">
                <div class="view-num">
                    {{ item.views}}
                </div>
                <img src="icon-remark.png"
                    class="icon-remark">

                <div class="remark-num">
                    <!-- {{ item.topic.comment_num}} -->
                </div>
            </div>
            <div class="div-line">
            </div>
        </div>
        <el-pagination v-model:current-page="currentPage"
            :page-size="10" :small="true"
            hide-on-single-page
            layout="total, prev, pager, next ,jumper"
            :total="posts.total"
            @current-change="handleCurrentChange"
            style="flex-grow: 1;" />

    </div>
</template>

<style scoped lang="scss">
.post-list-block {
    flex-grow: 1;
    margin-right: 4px;
    padding: 16px 30px 30px;
    min-width: 660px;

    .label1 {
        font-size: 24px;
        color: #333333;
        font-weight: bold;
        margin-bottom: 8px;
    }

    .post-item {
        margin-bottom: 12px;

        .subarea-label {
            color: #999999;
            font-size: 14px;
            margin-bottom: 2px;
        }

        .post-title {
            font-size: 20px;
            color: #222;
            margin-bottom: 4px;
        }

        .post-abstract {
            font-size: 16px;
            color: #666666;
            margin-bottom: 10px;
        }

        .post-pic-area {
            gap: 16px;
            margin-bottom: 8px;

            .post-pic {
                width: 180px;
                height: 100px;
                object-fit: cover;

            }
        }

        .lastline {
            font-size: 14px;
            line-height: 20px;
            color: #999999;
            align-items: center;
            margin-bottom: 8px;

            .author-avatar {
                margin-right: 4px;
            }

            .author-name {
                margin-right: 15px;
            }

            .icon-time {
                width: 18px;
                height: 18px;
                margin-right: 2px;
            }

            .publish-time {
                margin-right: 16px;
            }

            .view-num {
                margin-right: 16px;
            }

            .icon-view {
                width: 18px;
                height: 18px;
                filter: opacity(0.6);
                margin-right: 2px;
            }

            .icon-remark {
                width: 14px;
                height: 14px;
                filter: opacity(0.7);
                margin-right: 2px;
            }

        }

        .div-line {
            width: 80%;
            border-top: 1px solid #0003;
        }
    }

}
</style>

